<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Rich Marker</title>

    <style type="text/css">
      #map{
        width: 600px;
        height: 400px;
        float: left;
        margin: 0 5px;
      }
      .marker-bg {
        background-image: url('files/1.png');
        padding: 5px;
      }
      .marker-img {
        width: 43px;
      }
      
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="../src/richmarker';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '-compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>


    <script type="text/javascript">
      /**
       * Called on the intiial page load.
       */
      var map;
      var marker;
      
      function init() {
        var mapCenter = new google.maps.LatLng(0, 0);
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 1,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        marker = new RichMarker({
          position: mapCenter,
          map: map,
          draggable: true,
          shadow: false,
          content: '<div class="marker-bg">' +
            '<img class="marker-img" src="http://farm4.static.flickr.com/3212/3012579547_' +
            '097e27ced9_m.jpg"/></div>'
          });
      }

      // Register an event listener to fire when the page finishes loading.
      google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <h3>Rich Marker v3</h3>

    <div id="map"></div>

  </body>
</html>
